<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI悬浮助手</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">
        <!-- 回复区域 (初始隐藏) -->
        <div class="reply-container" id="replyContainer">
            <div class="reply-header">
                <span class="reply-title">AI助手</span>
                <div class="header-buttons">
                    <button class="collapse-btn" id="collapseBtn">−</button>
                    <button class="control-btn close-btn" id="closeBtn" title="关闭">
                        <svg width="12" height="12" viewBox="0 0 12 12">
                            <path d="M1 1l10 10M11 1L1 11" stroke="currentColor" stroke-width="2"/>
                        </svg>
                    </button>
                </div>
            </div>  
            <div class="reply-content" id="replyContent">
                <!-- AI回复内容将在这里动态添加 -->
            </div>
        </div>

        <!-- 输入区域 -->
        <div class="input-container">
            <div class="input-wrapper">
                <input 
                    type="text" 
                    class="message-input" 
                    id="messageInput" 
                    placeholder="问我任何问题..."
                    maxlength="500"
                >
                <button class="send-btn" id="sendBtn">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <path d="M2 21L23 12L2 3V10L17 12L2 14V21Z" fill="currentColor"/>
                    </svg>
                </button>

            </div>
        </div>



        <!-- 拖拽区域 -->
        <div class="drag-area" id="dragArea"></div>
    </div>

    <script src="renderer.js"></script>
</body>
</html>